<?php include 'head.php'; ?>
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>开始答题</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/component/pear/css/pear.css" />
	<style>
		.title {
			font-size: 20px;
			margin-top: 10px;
		}
	</style>
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 10px auto;">
				<div carousel-item style="margin: 0px auto; width: 100%; height: 460px; background-color: transparent;">
					<div>
						<div class="layui-form" style="text-align: center;margin-top: 90px;">
							<i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe63c;</i>
							<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
								开始答题
							</div>
							<div style="font-size: 14px;color: #666;margin-top: 20px;">此次答题将记入您的个人记录！</div>
							<div class="layui-input-inline">
								<select name="sort" lay-verify="required" id="sort">
									<?php $sorts = $DB->getAll("SELECT * FROM `sort`");
									foreach ($sorts as $sort) {
										# 输出分类
										echo ('<option value="' . $sort['id'] . '">' . $sort['name'] . '</option>');
									} ?></select>
							</div>
							<div style="text-align: center;margin-top: 40px;">
								<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">开 始</button>
							</div>
						</div>
					</div>
					<div style="overflow:auto;">
						<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto; padding-top: 40px;">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<b style="font-size: 15px;margin-top: 10px;">已开始计时，请认真答题！</b>您已答题<span id="timetext"></span><br>
								</div>
							</div>

							<script id="tpl" type="text/html">
							{{# layui.each(d.data, function(index, item){ }}
								<div class="layui-form-item">
									<div class="layui-input-block">
										<h3>{{ index+1 }}.{{# if(item.type == "text"){ }}
												{{item.title}}
											{{# } else { }}
												<a href="{{d.title}}" target="_blank"><img src="{{item.title}}" style="max-height: 400px; max-width: 90%;"></a>
											{{# } }}</h3>
									</div>
									<label class="layui-form-label">选项</label>
									<div class="layui-input-block">
										<input type="radio" name="{{ item.id }}" value="options1" title="A.{{ item.options1 }}">
										<input type="radio" name="{{ item.id }}" value="options2" title="B.{{ item.options2 }}">
										<input type="radio" name="{{ item.id }}" value="options3" title="C.{{ item.options3 }}">
										<input type="radio" name="{{ item.id }}" value="options4" title="D.{{ item.options4 }}">
									</div>
								</div>
								{{# }); }}
							</script>
							<div id="first"></div>

							<div class="layui-form-item">
								<div class="layui-input-block">
									<button type="button" class="pear-btn pear-btn-success" id="pre">重新获取题目</button>
									<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
										&emsp;确认提交&emsp;
									</button>
								</div>
							</div>
						</form>
					</div>
					<div>
						<div style="text-align: center;margin-top: 90px;">
							<i class="layui-icon layui-circle" style="color: white;font-size:30px;background: #00cc00;font-weight:bold;padding: 20px;line-height: 80px;">&#xe605;</i>
							<div style="font-weight: 500;margin-top: 30px;">
								提交成功！
							</div>
							<div style="font-size: 15px;margin-top: 20px;" id="parse">题目解析</div>
						</div>
						<div style="text-align: center;margin-top: 50px;">
							<button class="pear-btn pear-btn-success" id="next">再来一题</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="/component/layui/layui.js"></script>

<script src="/component/pear/pear.js"></script>
<script>
	function count(o) {
		var n = 0;
		for (var i in o) {
			n++;
		}
		return n;
	}
	layui.use(['form', 'layer', 'jquery', 'button', 'popup', 'step', 'element', 'laytpl', 'loading'], function() {
		var $ = layui.jquery,
			form = layui.form,
			layer = layui.layer,
			button = layui.button,
			popup = layui.popup,
			step = layui.step,
			laytpl = layui.laytpl,
			loading = layui.loading;

		//计时
		function timer() {
			window.second++;
			if (window.second >= 60) {
				window.second = 0;
				window.minute = window.minute + 1;
			}

			if (window.minute >= 60) {
				window.minute = 0;
				window.hour = window.hour + 1;
			}
			$('#timetext').text(window.hour + '时' + window.minute + '分' + window.second + '秒');
		}

		step.render({
			elem: '#stepForm',
			filter: 'stepForm',
			width: '100%',
			stepWidth: '600px',
			height: '540px',
			stepItems: [{
				title: '开始'
			}, {
				title: '题目'
			}, {
				title: '完成'
			}]
		});

		form.on('submit(formStep)', function(data) {
			loading.Load(1, "请稍等");
			var sort = data.field.sort;

			$.ajax({
				url: './ajax.php?act=startans&sort=' + sort,
				type: "POST",
				timeout: "5000",
				success: function(data) {
					loading.loadRemove();
					if (data.code == "200") {
						window.num = data.count;

						var getTpl = $('#tpl').html();
						laytpl(getTpl).render(data, function(html) {
							$('#first').html(html);
						});
						$('#first').append('<input style="display:none;" name="sort" value="' + sort + '">');

						form.render();

						window.hour, window.minute, window.second; //时 分 秒
						window.hour = window.minute = window.second = 0; //初始化

						console.log(setInterval(timer, 1000));

						step.next('#stepForm');
					} else {
						popup.failure(data.msg);
					}
				},
				error: function(XMLResponse) {
					loading.loadRemove();
					popup.failure("接口异常");
				}
			});

			return false;
		});


		$('#pre').click(function() {
			step.pre('#stepForm');
			return false;
		});

		$('#next').click(function() {
			step.next('#stepForm');
			return false;
		});

		// 提交答题
		form.on('submit(formStep2)', function(data) {

			/// 验证
			var checked = $('#first').attr("checked");

			if (count(data.field) <= window.num) {
				popup.failure("请把所有题目答完！");
				return false;
			}

			/// 按钮加载动画
			var load = button.load({
				elem: '.pear-btn-primary'
			});
			/// 提交题目
			$.ajax({
				url: './ajax.php?act=postque',
				type: "POST",
				timeout: "5000",
				data: Object.assign(data.field, {
					time: window.hour + ':' + window.minute + ':' + window.second
				}),
				success: function(data) {
					load.stop();
					if (data.code == "200") {
						$('#parse').text('您一共答对' + data.correct + '道题！');
						step.next('#stepForm');
						popup.success(data.msg);
					} else {
						popup.failure(data.msg);
					}
				},
				error: function(XMLResponse) {
					load.stop();
					popup.failure("提交异常");
				}
			});

			return false;
		});
	});
</script>

</html>